<template>
  <div class="count">
    <h2>当前求和为：{{ sum }}</h2>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">加</button>
    <button @click="Reduce">减</button>
  </div>
</template>

<script setup lang="ts" name="Count">
import { ref } from "vue";
import { storeToRefs } from 'pinia'
// 引入useCountStore
import { useCountStore } from '@/store/count'
// 使用useCountStore，得到一个专门保存count相关的store
const countStore = useCountStore()
// storeToRefs只会关注sotre中数据，不会对方法进行ref包裹
const { sum } = storeToRefs(countStore)

// 数据
let n = ref(1) // 用户选择的数字
// 方法
function add() {
  countStore.sum+=(n.value)
}
function Reduce() {
  countStore.sum -= n.value
}
</script>

<style scoped>
.count {
  background: linear-gradient(135deg, #ff7e5f, #feb47b);
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  text-align: center;
  max-width: 400px;
  margin: 0 auto;
  color: white;
  font-family: 'Arial', sans-serif;
  position: relative;
  overflow: hidden;
}

.count::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  pointer-events: none;
  z-index: 1;
}

.count h2 {
  font-size: 24px;
  margin-bottom: 15px;
}

.count select {
  margin: 10px 5px;
  padding: 8px;
  border: none;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 16px;
  transition: background-color 0.3s;
  z-index: 2;
  position: relative;
}

.count select:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.count button {
  margin: 10px 5px;
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  background-color: #ff6347;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  z-index: 2;
  position: relative;
}

.count button:hover {
  background-color: #ff4500;
  transform: scale(1.05);
}

.count button:active {
  background-color: #3e8e41;
  transform: scale(0.95);
}
</style>
